<template>
    <div>
      <h1 align="center">修改密码</h1>

       <el-row>
          <el-col :span="8">&nbsp;</el-col>
          <el-col :span="8">
            <el-form ref="form" :model="userInfo" label-width="80px">

              <el-form-item label="邮箱">
                <!-- el-input  文本框-->
                <el-input v-model="userInfo.email"></el-input>
              </el-form-item>
              <el-form-item label="验证码">
                <!-- el-input  文本框-->
                <el-input v-model="userInfo.code"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button :disabled="isShow" type="success" size="mini" @click="sendCode">发送验证码{{num}}</el-button>
                <el-button  type="success" size="mini" @click="sure">确定</el-button>
              </el-form-item>

            </el-form>
          </el-col>
          <el-col :span="8">&nbsp;</el-col>
       </el-row>


    </div>
</template>

<script>
    export default {
        name: "UpdatePwd",
        data(){
          return{
              userInfo:{
                  email:"767920412@qq.com",
                  code:""
              },
              num:"",
              isShow:false//发送验证码按钮是否禁用
          }
        },
        methods:{
          sure(){//确定
            var self = this;
            //ajax提交
            this.$http.post("/user-info/codeVidate",this.$qs.stringify(this.userInfo))
              .then(function (rs) {
                self.$message(rs.data.msg);
              })
          },
          sendCode(){//发送验证码
            var self = this;
            //ajax提交
            this.$http.post("/user-info/sendCode",this.$qs.stringify(this.userInfo))
              .then(function (rs) {
                self.$message(rs.data.msg);
                if(rs.data.code==200){
                  //回到表格页面
                 // self.$router.push("/");
                  self.changeBtn();
                }else{
                  self.$message(rs.data.msg);
                }
              })
          },
          changeBtn(){

              this.num = 60;
              var self = this;
              //禁用发送验证码按钮
              this.isShow=true;
              //创建计时器
              var time = setInterval(function () {
                self.num--;
                  //判断倒计时是否要结束
                 if(self.num==0){
                   //结束计时器
                   clearInterval(time);
                   //还原num的值
                   self.num="";
                   //开启发送验证码按钮
                   self.isShow = false;

                 }
              },1000)
          }
        }

    }
</script>

<style scoped>

</style>
